<html>
<head>
    <meta charset="UTF-8">
    <title>网上商城会员注册页面</title>
    <link type="text/css" rel="stylesheet" href="/shop/static/css/style.css">
    <link href="/shop/static/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="/shop/static/js/jquery-1.11.3.min.js"></script>
    <script src="/shop/static/js/bootstrap.js"></script>
    <style type="text/css">
        .login_form {
            height: 420px;
            margin-top: 25px;
        }
    </style>
</head>
<body>
<div id="login_header">
    <img class="logo_img" alt="" src="../../static/img/logo.gif">
</div>

<div class="login_banner">

    <div id="l_content">
        <span class="login_word">欢迎注册</span>
    </div>

    <div id="content">
        <div class="login_form">
            <div class="login_box">
                <div class="tit">
                    <h1>注册网上商城会员</h1>
                    <span class="errorMsg"></span>
                </div>
                <div class="form">
                    <form action="/shop/register" method="post"><br/>
                        用户名称：
                        <input class="itxt" type="text" placeholder="请输入用户名" autocomplete="off" tabindex="1"
                               name="username" id="username"/>
                        <br/>
                        <br/>
                        <label>用户密码：</label>
                        <input class="itxt" type="password" placeholder="请输入密码" autocomplete="off" tabindex="1"
                               name="password" id="password"/>
                        <br/>
                        <br/>
                        <label>确认密码：</label>
                        <input class="itxt" type="password" placeholder="确认密码" autocomplete="off" tabindex="1"
                               name="repwd" id="repwd"/>
                        <br/>
                        <br/>
                        <label>电子邮件：</label>
                        <input class="itxt" type="text" placeholder="请输入邮箱地址" autocomplete="off" tabindex="1"
                               name="email" id="email"/>
                        <br/>
                        <br/>
                        <label>验证码：</label>
                        <input class="itxt" type="text" style="width: 150px;" id="code"/>
                        <img alt="" src="../../static/img/code.bmp" style="float: right; margin-right: 40px">
                        <br/>
                        <br/>
                        <input type="submit" value="注册" id="sub_btn"/>

                    </form>
                </div>

            </div>
        </div>
    </div>
</div>
<div id="bottom">
			<span>
				网上商城.Copyright &copy;2021
			</span>
</div>
</body>
<script>
    //用户注册


    //判断用户名是否符合格式
    $("#username").blur(function () {
        var username = $("#username").val();
        if (username) {
            if (!/^[A-Za-z0-9_]{5,12}$/.test(username)) {
                $("#username").val("")
                alert("用户名格式不正确，请重新输入");
                return;
            }
        }

    })


    //验证密码是否符合规则
    $("#password").blur(function () {
        var password = $("#password").val();
        if (password) {
            if (!/^[A-Za-z0-9_]{5,12}$/.test(password)) {
                $("#password").val("")
                alert("密码格式不正确，请重新输入");
                return;
            }
        }
    })
    //验证两次密码是否正确
    $("#repwd").blur(function () {
        var password = $("#password").val();
        var repw = $("#repwd").val();
        if (password != repw) {
            $("#repwd").val("")
            alert("两次密码不一致，请重新输入");
            return
        }
    })
    $("#sub_btn").click(function () {

        var username = $("#username").val();
        var password = $("#password").val();
        var repw = $("#repwd").val();
        var email = $("#email").val();
        var code = $("#code").val()
        if (!username) {
            alert("用户名为空")
            return false;
        }
        if (!password) {
            alert("密码为空")
            return false
        }
        if (!repw) {
            alert("确认密码为空")
            return false
        }
        if (password != repw) {
            alert("确认密码为空")
            return false
        }
        if (!/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/.test(email)) {
            //邮箱格式不正确
            alert("邮箱格式不正确！");
            $("#email").val("")
            $("#email")[0].focus()
            return false
        }
        if (!code) {
            alert("验证码为空！");
            return false
        }
        $("fom").submit
    })


</script>
</html>
